<!--通用选择列表页面，使用方法-->
<!--父组件声明该组件，并使用变量控制显示隐藏，然后实现接收数据方法即可-->
<!--Url：请求路径，listShow：显示字段行数组(key、prefix、secondkey、secondprefix)-->
<!--<selectListPage  v-if="showSelectPage" v-on:update-flag="showSelectPage=false" v-on:select-item="handleSelectItem"-->
<!--     :pageTitle="'选择合作伙伴'" :url="'partnerBasic$api$findAll'"-->
<!--     :body-param="{}" :query-param="{}"-->
<!--     :listShow="[{ 'key':'partnerName'},{ 'key':'partnerCode', 'prefix':'合作伙伴编码'}]">-->
<!--</selectListPage>-->
<template>
    <div class="page-province-user-list">

        <van-popup v-model="isShow" position="bottom" :style="{ height: '100%', width: '100%' }">

            <!-- 导航栏 -->
            <div class="titlebar bg-theme color-f text-l">
                <i class="iconfont icon-fanhui font19 pl08 iback" @click="goBack"></i>
                <!-- 详情进入 -->
                <span class="font19 ml16 ">{{ pageTitle }} </span>
            </div>

            
            <!-- 面包屑 -->
            <div class="bread-crumbs">
                <div class="bread-crumbs-content" v-for="(item, index) in breadCrumbsData" :key="item.id"
                    @click="breadCrumbsClick(item, index)">
                    <span
                        :class="index == breadCrumbsData.length - 1 ? 'bread-crumbs-content-company-current' : 'bread-crumbs-content-company'">{{
                        item.name }}</span>
                    <img v-if="index != breadCrumbsData.length - 1" src="../../assets/images/icon_right.png" alt=""
                        class="icon_right">
                </div>
            </div>


            <!-- 内容区 -->
            <div class="content-view">

                <van-empty v-if="currentEmpty" class="custom-image" :image="require('@/assets/images/pic_nodata.png')"
                    description="当前无可选人员数据"></van-empty>

                <van-list v-else>

                    <van-cell v-for="(item) in currentContentList" :key="item.id" @click="cellDidSelectMethod(item)">

                        <div v-if="item.treeType === 'user'" style="display: flex;">
                            <div class="circle-name" :style="{ backgroundColor: configTextColor(item.name) }"> {{
                                item.name.slice(-2) }}</div>
                            <div class="content-name"> {{ item.name }}</div>
                        </div>

                        <div v-else style="display: flex;">
                            <div class="circle-name" :style="{ backgroundColor: configTextColor(item.name) }">
                                <img style="width: 25px; height: 25px; text-align: center;"
                                    src="../../assets/images/icon_org.png" alt="">
                            </div>
                            <div class="content-name"> {{ item.name }}</div>
                        </div>
                    </van-cell>
                </van-list>
            </div>


            <!-- 底部按钮 -->
            <div v-if="isGroupSelect" class="bottom-btn-box">

                <div style="margin-left: 13px; margin-top: 5px; font-size: 14px;">已选人员（点击人员可删除）</div>
                <div style="display: flex; align-items: center; margin-top: 5px;">

                    <div class="scroll-container">
                        <div v-for="item, index in currentSelectList" :key="item.name" class="display-ib">

                            <div @click="deleteSelectedUser(index)" class="select-user-item">
                                {{ item.name }}
                            </div>
                        </div>

                    </div>

                    <van-button class="bottom-btn" native-type="button" @click="sureButtonClick" type="info"
                        block>确定</van-button>
                </div>

            </div>

        </van-popup>
    </div>
</template>

<script>

import { allProvinceFindOneStep } from "@/api/dictapi";
import jTool from "@/assets/js/jHelper";
import util from '@/assets/js/public';
import { Toast } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";

export default {
    props: {
        
        pageTitle: {
            type: String,
            default: '选人.列表',
        },

        listShow: {
            type: Array,
            default: () => []
        },

        maxNum: {
            type: Number,
            default: 0
        },
        isGroupSelect: {
          type: Boolean,
          default: false
        },
    },

    data() {
        return {

            isShow: true,
            single: false,
            bgcList: ['#f65f8c', '#f6bf26', '#5cc9f4', '#ff8d6d', '#f0615b', '#68b6cd', '#bc84cb', '#39c1b3', '#77c06e', '#5c97f5'],

            breadCrumbsData: [],// 面包屑数据
            requestAllData: [], // 对应“面包屑数据”层级 存放的组织架构数据

            currentContentList: [], // 当前数据
            currentSelectList: [],  // 选中的人员
        }
    },

    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),

        currentEmpty() {
            return this.currentContentList.length == 0;
        },



    },

    created() {

        this.single = this.maxNum == 1;
        this.requestListDatas();
    },

    methods: {

        simpleHash(str) {
            let hash = 0;
            for (let i = 0; i < str.length; i++) {
                let char = str.charCodeAt(i);
                hash = ((hash << 5) - hash) + char;
                hash &= hash; // Convert to 32bit integer
            }
            return hash;
        },

        configTextColor(value) {

            let hash = this.simpleHash(value);
            return this.bgcList[Math.abs(hash) % 10];
        },




        goBack() {
            this.isShow = false;
            this.$emit('update-flag', false)
        },

        breadCrumbsClick(item, index) {

            let data = this.requestAllData[index];
            if (data.length > 0) {
                
                let length = this.breadCrumbsData.length - index - 1;

                console.log(index, length, this.breadCrumbsData, this.requestAllData);
                this.breadCrumbsData.splice(index + 1, length);
                this.requestAllData.splice(index + 1, length);
                this.currentContentList = data;
            }
        },


        cellDidSelectMethod(data) {

            if (data.treeType === 'user') {

                // 单选
                if (this.single) {
                    this.currentSelectList.push(data);
                    this.onItemSelected(this.currentSelectList);
                }
                else
                {
                    // 判断选中人员是否已存在
                    if (this.currentSelectList.some(item => item.id == data.id)) {
                        Toast({ type: 'text', message: '当前人已选中', duration: 1000 });
                        return;
                    }

                    if (this.maxNum > 0 && this.currentSelectList.length >= this.maxNum) {
                        Toast({ type: 'text', message: '最多只能选择' + maxNum + '人', duration: 1000 });
                        return;
                    }

                    // 增加一个选中标记
                    data.isSelected = true;
                    this.currentSelectList.push(data);
                }
                
            } else {

                // 被选中部门放在面包屑中
                this.breadCrumbsData.push(data);

                // 请求选中部门的数据，展示
                this.requestListDatas(data.id);
            }
        },

        deleteSelectedUser(index) {

            this.currentSelectList.splice(index, 1);
        },
        

        onItemSelected(value) {
            this.isShow = false;
            this.$emit('select-item', value)
        },

        sureButtonClick() {

            this.onItemSelected(this.currentSelectList);
        },


        requestListDatas(orgCode) {
            if(!orgCode||orgCode==''){
              orgCode=this.userinfo.belongCompanyCodeParent
            }
            Toast.loading({ message: '加载中', forbidClick: false });
            allProvinceFindOneStep(orgCode)
                .then((result) => {
                    Toast.clear();
                    if (result.responseid == 1) {

                        // 请求成功
                        let departArr = [];
                        let userArr = [];
                        let dataArr = result.data.data;
                        if (dataArr) {

                            for (const iterator of dataArr) {
                                if (iterator.treeType == 'org') {

                                    // 河南移动 最大公司不显示在列表中，直接放在面包屑中
                                    if (iterator.treeLevel === 0) {
                                        this.breadCrumbsData.push(iterator);
                                    }
                                    else {

                                        departArr.push(iterator);
                                    }
                                }
                                else {
                                    userArr.push(iterator);
                                }
                            }

                            let allArr = userArr.concat(departArr);
                            this.currentContentList = allArr;

                            // 当前的数据存在所有数据中，以便查看
                            this.requestAllData.push(allArr);
                        }

                    } else {
                        this.requestCompletion('result.message');
                    }
                }).catch((error) => {
                    Toast.clear();
                    this.requestCompletion('获取数据失败,请稍后重试');
                });
        },


        requestCompletion(error) {
            if (!jTool.stringIsEmpty(error)) {
                this.requestErrorMessage = error;
                Notify({ type: 'warning', message: error })
            }
        }
    }
}
</script>

<style scoped>
.titlebar {
    width: 100%;
    height: 50px;
    -webkit-box-align: center;
    -webkit-box-pack: justify;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0px;
    z-index: 10;
}

.bread-crumbs {
width: 100%;
    background-color: #fafafa;
    display: flex;
    height: 44px;
    position: fixed;
    top: 50px;
    z-index: 10;
}

.bread-crumbs-content {
    font-size: 15px;
    display: flex;
    align-items: center;
}

.icon_right {

    text-align: center;
    width: 5px;
    height: 10px;
}

.bread-crumbs-content-company-current {
    margin: 8px 8px 8px 13px;
    color: #969696;
}

.bread-crumbs-content-company {
    margin: 8px 8px 8px 13px;
    color: #0080cb;
}



.content-view {
    margin-top: 95px;
    margin-bottom: 82px;
}

.circle-name {
flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: white;
    text-align: center;
    align-content: center;
}


.content-name {
    flex: 1;
    font-size: '15px';
    padding-left: 8px;
    align-content: center;
}


.scroll-container {
    width: calc(100% - 70px);
    min-height: 49px;
    padding: 0px 0px 0px 13px;
    display: flex;
    align-items: center;

    overflow: auto;
}

.select-user-item {

    width: auto;
    min-width: 70px;
    height: 33px;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */

    margin-right: 15px;
    color: #7abcf8;
    border: 1px solid;
    border-color: #7abcf8;
    border-radius: 5px;

}



.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}

.bottom-btn {

    width: 70px;
    height: 33px;
    margin: 0px 13px;

    display: inline-block;
    background-color: #7abcf8;
    color: white;

}

.bottom-btn-box {

    background-color: white;
    height: 90px;

    position: fixed;
    bottom: 0;
    width: 100%;
    color: black;
    font-size: 16px;
}



</style>